<template>
  <view class="member-container">
    <scroll-view class="member-scroll" scroll-y>
      <view class="banner" @click="$u.route('/pages/user/record/record')">
        <view class="member-number">
          <view class="">No.{{ userInfo.Number }}</view>
          <view class="" v-on:click="onDC">明细</view>
        </view>
        <view style="margin-top: 10rpx">账户余额</view>
        <view class="member-bottom">
          <view class="member-price">￥{{ balance }}</view>
          <!--    <view style="font-size: 24rpx">
            <view>充值本金￥{{ userInfo.rechargeBalance }}</view>
            <view>商家赠送￥{{ userInfo.giftBalance }}</view>
          </view> -->
        </view>
      </view>

      <u-tabs
        :list="tabList"
        :current="current"
        :lineColor="`#fe0203`"
        :activeStyle="{
          color: '#fe0203',
          fontWeight: 'bold',
        }"
        barWidth="120"
        @change="onMoney"
      />
      <!--    <view style="line-height: 100rpx; font-size: 30rpx; font-weight: 600"
        >储值有礼</view
      > -->
      <view
        class="check-member flex flex--wrap"
        style="display: flex; flex-wrap: wrap"
        v-if="current == 0"
      >
        <view
          :class="{ active: isSelect === index }"
          v-for="(item, index) in amountList"
          :key="item.id"
          @click="onCheck(item, index)"
        >
          <view style="padding-top: 10rpx; font-size: 24rpx"
            >充值{{ item.FAmount }}元</view
          >
          <!-- 赠券 -->
          <view class="gift-box">赠送{{ item.FGiveAmt }}元</view>
        </view>
      </view>

      <view v-if="current == 1" class="custom">
        <text class="cus-title">请输入金额</text>
        <input
          class="cus-money"
          type="digit"
          v-model="v"
          placeholder="￥"
          @blur="onAmount"
        />
      </view>
    </scroll-view>

    <view class="member-footer">
      <view>
        <view>
          实付金额￥
          <text style="font-weight: 600">{{ depositMoney }}</text>
        </view>
        <view style="color: #f05f47">
          实际到账￥
          <text style="font-size: 40rpx">{{ aMoney }}</text>
        </view>
      </view>
      <view style="margin-top: 30rpx; font-size: 30rpx; width: 35%">
        <u-button
          @click="onRefill"
          style="color: #7d5a35"
          color="linear-gradient(to right, #dd424d,#dd524d)"
          shape="circle"
          >立即充值</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { reqPost } from "../../common/http.request";
import { uGetStorageSync, uNavigateTo } from "../../utils/uniUtils";

export default {
  data() {
    return {
      isSelect: 0,
      userInfo: {},
      Member: null,
      balanceList: [],
      checkData: {},
      couponList: [], // 赠送券列表
      reactifyRrmark: "",
      amountList: [],
      depositMoney: 0,
      tabList: [{ name: "储值有礼" }, { name: "自定义充值" }],
      current: 0,
      dMoney: 0,
      aMoney: 0,
      v: 0,
    };
  },
  computed: {
    balance() {
      if (this.balanceList.amount) {
        return this.userInfo.balance.toFixed(2);
      } else {
        return 0.0;
      }
    },
    amount() {
      if (this.checkData?.FAmount) {
        return this.checkData.FAmount.toFixed(2);
      } else {
        return 0.0;
      }
    },
  },
  onShow: async function () {
    this.userInfo = uGetStorageSync("userInfo");
    await this.membership();
    this.getPageList(this.isSelect);
  },
  methods: {
    async getPageList() {},
    onCheck(item, index) {
      // 选中
      this.isSelect = index;
      this.checkData = item;
      this.depositMoney = this.amountList[index].FAmount.toFixed(2);
      this.aMoney = (
        this.amountList[index].FAmount + this.amountList[index].FGiveAmt
      ).toFixed(2);
    },
    membership: async function () {
      this.Member = (await reqPost("GetMemberData")).Data;
      this.amountList = (await reqPost("DepositGiveData")).Data;
      this.depositMoney =
        this.amountList.length > 0 ? this.amountList[0].FAmount.toFixed(2) : 0;
      this.aMoney =
        this.amountList.length > 0
          ? (this.amountList[0].FAmount + this.amountList[0].FGiveAmt).toFixed(
              2
            )
          : 0;
    },
    onRefill() {
      console.log("充值");
    },
    onMoney(e) {
      this.current = e.index;
      if (this.current == 0) {
        this.depositMoney = this.amountList[this.isSelect].FAmount.toFixed(2);
        this.aMoney = (
          this.amountList[this.isSelect].FAmount +
          this.amountList[this.isSelect].FGiveAmt
        ).toFixed(2);
      } else {
        this.depositMoney = (parseFloat(this.v) || 0).toFixed(2); //金额
        this.aMoney = parseFloat(this.depositMoney);
      }
    },
    onAmount(e) {
      this.v = (parseFloat(e.detail.value) || 0).toFixed(2); //金额
      this.depositMoney = parseFloat(this.v).toFixed(2); //金额
      this.aMoney = parseFloat(this.v);
    },
    onDC() {
      uNavigateTo("/pages/member/detail");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/deposit.scss";
</style>
